<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<p>{{message}}</p>

<div class="tool-bar">
    <jigsaw-button (click)="payRaiseSelected()" colorType="primary">加薪</jigsaw-button>
    <jigsaw-button (click)="fireSelected()" colorType="danger">辞退</jigsaw-button>
</div>
<jigsaw-table [data]="tableData" [columnDefines]="columnDefines" [floatingHeader]="true"
              [additionalColumnDefines]="additionalColumnDefines"
              [(additionalData)]="additionalData" trackRowBy="name"
              (edit)="onCellChange($event)" height="400">
</jigsaw-table>
<br><br>
<jigsaw-pagination
    [data]="tableData"
    [pageSizeOptions]="[5, 10, 50, 100, 200]"
    [searchable]="true"
    [showQuickJumper]="true"
    (search)="onSearch($event)"
></jigsaw-pagination>

<!--
    let-ctx="context" 声明了模板内部的ctx变量，它可以在模板内部自由使用，模板外部则访问不到它
    context的结构是 {cellData: string|number, row:number, column:number}
-->
<ng-template #operation let-context="context">
    <span><a (click)="payRaise(context.row)">加薪</a> <a (click)="fire(context.row)">辞退</a></span>
</ng-template>
